<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card style="width:100%;align-item:center;">
                    <div id="monthChart" style="width:500px;height:500px;"></div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card style="width:100%;align-item:center;">
                    <div id="efficacyChart" style="width:500px;height:500px;"></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {getCaseData,getCaseAnalyseData} from '@/api/cases'
import * as echarts from 'echarts/core';
import { DatasetComponent, TooltipComponent, GridComponent } from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { TitleComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LegendComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';

echarts.use([
    LegendComponent,
    PieChart,
    DatasetComponent,
    TooltipComponent,
    GridComponent,
    BarChart,
    CanvasRenderer,
    TitleComponent,
    LineChart
]);

export default {
    data() {
        return {
            dailyData:{},
            monthOption:{
                dataset:{
                    source:[]
                },
                title: {
                    text: '近一年确诊人数变化',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {   
                        name:'确诊人数',
                        type: 'line',
                        smooth: true
                        // data: [10, 52, 200, 334, 390, 330, 220]
                    }
                ]
            },
            monthChart:'',
            efficacyOption:{
                title: {
                    text: '药品和治疗结果分析',
                    left: 'center'
                },
                dataset: {
                    dimensions: ['name', '痊愈', '其他'],
                    source: [],
                    label: {
                        show: false
                    },
                    emphasis: {
                        focus: 'series'
                    },
                },

                legend: {
                    orient: 'horizontal',
                    left: 'right',
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                },
                series: [
                    {   
                        name:'痊愈',
                        type: 'bar', 
                        stack: 'one',
                        label: { show: true },
                        emphasis: { focus: 'series' },
                    }, 
                    {
                        name:'其他',
                        type: 'bar', 
                        stack: 'one',
                        label: { show: true },
                        emphasis: { focus: 'series' },
                    },
                ]
            },
            efficacyChart:'',
        };
    },

    mounted() {
        this.getCaseAnalyseData()
    },

    methods: {
        async getCaseAnalyseData(){
            await getCaseAnalyseData().then(resp=>{
                if(resp.code == 200){
                    this.monthOption['dataset'] = {source:resp.data['monthCount']}
                    this.efficacyOption['dataset'] = {source:resp.data['efficacyCount']}
                    this.$nextTick(()=>{
                        this.chartinit()
                    })
                }
            })
        },
        chartinit(){
            this.monthChart = echarts.init(document.getElementById('monthChart'))
            this.monthChart.setOption(this.monthOption)

            this.efficacyChart = echarts.init(document.getElementById('efficacyChart'))
            this.efficacyChart.setOption(this.efficacyOption)
        },

    },
};
</script>

<style scoped>

</style>